<section id="fancy-links">
  <h2>Fancy links</h2>
  <p>Some links may be special depending on their href or their rel:</p>
  <p>
    <a href="mailto:alvaromontoro@gmail.com">Link to alvaromontoro@gmail.com</a><br />
    <a href="tel:fakenumber">Link to a number (call)</a><br />
    <a href="sms:fakenumber">Link to a number (message)</a><br />
    <a href="file:index.html">Link to a file</a><br />
    <a href="file:index.html" download>Link to download a file</a><br />
    <a rel="external" href="#">Link to an external site</a><br />
    <a rel="bookmark" href="#">Link to bookmark</a>
  </p>

  <p>
    Those special links will work inline too!
    <a href="mailto:alvaromontoro@gmail.com">Email me!</a> or see an
    <a rel="external" href="https://alvaromontoro.com">Link to an external site</a>.
  </p>

  <p>
    <strong>Important:</strong> The icons are not available in the lite version of
    the library.
  </p>

  <details class="demo">
    <summary>View code</summary>
    <pre><code>&lt;a href="mailto:alvaromontoro@gmail.com"&gt;Link to alvaromontoro@gmail.com&lt;/a&gt;&lt;br /&gt;
&lt;a href="tel:fakenumber"&gt;Link to a number (call)&lt;/a&gt;&lt;br /&gt;
&lt;a href="sms:fakenumber"&gt;Link to a number (message)&lt;/a&gt;&lt;br /&gt;
&lt;a href="file:index.html"&gt;Link to a file&lt;/a&gt;&lt;br /&gt;
&lt;a href="file:index.html" download&gt;Link to download a file&lt;/a&gt;&lt;br /&gt;
&lt;a rel="external" href="#"&gt;Link to an external site&lt;/a&gt;&lt;br /&gt;
&lt;a rel="bookmark" href="#"&gt;Link to bookmark&lt;/a&gt;</code></pre>
  </details>            
</section>